<template>
  <div
    data-v-videozone
    class="video-zone"
    v-infinite-scroll="load"
    infinite-scroll-disabled="disabled"
  >
    <div class="video-list">
      <VideoCart
        ref="videobox"
        v-for="item in getList"
        :key="item.id"
        :videoObj="{ src: item.cover, date: item.upload_date, ...item }"
        :isShow="false"
        width="16vw"
        height="10vw"
      >
      </VideoCart>
    </div>

    <!-- <div v-for="item in getList" :key="item.id" class="video-item">
      <el-card
        :body-style="{ padding: '10px' }"
        class="item-inner"
        shadow="hover"
      >
        <div class="item-top">
          <a @click="toVideoDetails(item.id)">
            <img :src="item.cover" alt="" />
          </a>
        </div>
        <div class="item-bottom">
          <h2 class="video-title">
            {{ item.title }}
          </h2>
          <span
            ><a @click="toHomePage(item.video_issuer)">{{ item.username }}</a
            ><i class="el-icon-date">{{ item.upload_date }}</i></span
          >
        </div>
      </el-card>
    </div> -->
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
import VideoCart from "@/components/VideoCart";

export default {
  name: "VideoZone",
  components: {
    VideoCart,
  },

  data: function () {
    return {
      videoList: [],
      pos: 15,
      loading: false,
    };
  },

  props: {
    list: Array,
  },

  updated() {
    this.$refs["videobox"].forEach((item, index) => {
      // console.log(item);
      item._data.isShow = true;
    });
  },

  computed: {
    getList() {
      return this.list.splice(0, this.pos);
    },

    noMore() {
      return this.pos >= this.list.length;
    },

    disabled() {
      return this.loading || this.noMore;
    },
  },

  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.pos += 5;
        this.loading = false;
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.video-zone[data-v-videozone] {
  width: 100%;
  height: 100%;

  .video-list {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
  }

  & > p {
    padding: 10px;
    text-align: center;
  }
}
</style>